<template>
  <common :show-search="false" title="历史价值">
    <div class="historyPrice">
      <div class="pastChart">
        <div class="pastPriceCanvas" id="pastPriceChart"></div>
      </div>
    </div>
  </common>

</template>
<script>
import Common from './common';
import Echarts from 'echarts';
export default {
  data () {
    return {
      options: {
        title: {
          text: '10298600-后胸肉NE-BRISKET_ 普通',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        type: 'bar',
        barWidth: 2,
        tooltip: {},
        legend: {
          data: ['销量']
          // itemGap: 5
        },
        xAxis: {
          nameLocation: 'end',
          data: ['18-8-16', '18-9-16', '18-10-16', '18-11-16', '18-12-16', '19-1-16', '19-2-16', '19-3-16', '19-4-16', '19-5-16', '19-6-16', '19-7-16', '19-8-16'],
          axisLabel: {
            rotate: 45,
            color: function () {
              return '#fff';
            },
            fontSize: 14
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'value',
            min: 30,
            max: 50,
            interval: 2,
            splitLine: {
              lineStyle: {
                color: '#303541'
              }
            },
            axisLabel: {
              color: function () {
                return '#fff';
              },
              fontSize: 14
              // margin: -20
            },
            axisTick: {
              show: false
            }
          },
          {
            min: 30,
            max: 50,
            show: false,
            // minInterval: 20000
            splitLine: {
              lineStyle: {
                color: '#303541'
              }
            },
            axisLabel: {
              color: function () {
                return '#fff';
              },
              fontSize: 14
              // margin: -20
            },
            axisTick: {
              show: false
            }
          }
        ],
        dataZoom: {
          show: true,
          realtime: true,
          type: 'inside',
          y: 3,
          height: 15,
          start: 0,
          end: 50,
          textStyle: {
            color: '#ffffff'
          }
        },
        series: [
          {
            type: 'line',
            // smooth: true,
            yAxisIndex: 1,
            data: [32, 41, 33, 42, 34, 32, 43, 31, 42, 32, 41, 32, 36]
          },
          {
            type: 'bar',
            data: [32, 41, 33, 42, 34, 32, 43, 31, 42, 32, 41, 32, 36],
            name: 'Jan-13',
            itemStyle: {
              normal: {
                color: function () {
                  return '#e63453';
                }
              }
            }
          }
        ]
      }
    };
  },
  mounted () {
    // this.$nextTick(() => {
    this.renderHistoryData();
    // });
  },
  methods: {
    renderHistoryData () {
      let macroChart = Echarts.init(document.getElementById('pastPriceChart'));
      macroChart.setOption(this.options);
    }
  },
  components: {
    Common
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
  .historyPrice{
    width: 1070px;
    height: 446px;
    border: 1px solid #303541;
    .pastChart{
      width: 1030px;
      height: 406px;
      margin: 20px;
      .pastPriceCanvas{
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
